<template>
  <div
    class="flex_js p_0_20 border_bottom"
    style="
      height: 48px;
      background-color: var(--bgColor);
      color: var(--textColor);
    "
  >
    <div class="flex fs_16 fw" v-if="!top_menu">
      <svgBtn
        icon="show_menu"
        style="font-size: 20px; margin-right: 20px"
        :class="menu_show ? 'to_left' : 'to_right'"
        @click="store.commit('change_isCollapse')"
      ></svgBtn>

      <div class="flex" v-if="show_crumbs">
        <div class="flex" v-if="select_1 != 0">
          <div v-for="(item, index) in menu_list_1" :key="index">
            <el-dropdown v-if="select_1 - 1 == index" trigger="click">
              <span class="el-dropdown-link" style="font-size: 16px">
                {{ item.name
                }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </span>
              <span
                style="
                  margin: 0 10px;
                  height: 13px;
                  border-left: 1px solid #999;
                "
              ></span>
              <template #dropdown>
                <el-dropdown-menu
                  style="padding: 0"
                  v-for="(item1, index1) in item.children"
                  :key="index1"
                >
                  <el-dropdown-item
                    @click="
                      select_menu({ item: item1, type: 1, index: index1 })
                    "
                    v-if="!item1.children"
                  >
                    <div>{{ item1.name }}</div>
                  </el-dropdown-item>
                  <el-dropdown-item v-else>
                    <el-dropdown placement="right-start">
                      <span class="el-dropdown-link">
                        {{ item1.name
                        }}<el-icon class="el-icon--right"
                          ><arrow-down
                        /></el-icon>
                      </span>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item
                            v-for="(items, index2) in item1.children"
                            :key="index2"
                            @click="
                              select_menu({
                                item: items,
                                type: 1,
                                index: index2,
                              })
                            "
                            >{{ items.name }}</el-dropdown-item
                          >
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <div style="color: #3580eb">{{ last_value }}</div>
      </div>
    </div>
    <div v-else style="flex: 1; height: 100%">
      <el-menu
        :default-active="default_active"
        class="el-menu-vertical-demo"
        style="height: 100%"
        mode="horizontal"
        unique-opened
        @select="select_top_menu"
      >
        <el-menu-item index="/index" class="c_fff cp flex">
          <img
            src="@/assets/img/icon_house.png"
            style="width: 30px; height: 38px; margin: 10px"
          />
          <img src="@/assets/img/logo.png" style="width: 80px; height: 16px" />
        </el-menu-item>
        <el-sub-menu
          v-for="(item, index) in menu_list_1"
          :key="index + ''"
          :index="index + 1 + ''"
        >
          <template #title>
            <svgBtn
              :icon="item.icon"
              class="cp"
              style="font-size: 18px; margin-right: 8px"
            ></svgBtn>
            <span>{{ item.name }}</span>
          </template>

          <div v-for="item1 in item.children" :key="item1.path + ''">
            <el-sub-menu
              v-if="
                (item1.path == null || item1.path == '') &&
                item1.parentId == item.id
              "
              :index="item1.id"
            >
              <template #title>{{ item1.name }}</template>
              <div v-for="item2 in item1.children" :key="item2.path + ''">
                <el-menu-item
                  v-if="item2.parentId == item1.id"
                  :index="item2.path"
                  style="
                    padding-left: 45px;
                    background-color: #fff;
                    color: #333;
                  "
                  >{{ item2.name }}
                </el-menu-item>
              </div>
            </el-sub-menu>
            <el-menu-item
              v-if="
                item1.path != null &&
                item1.parentId == item.id &&
                item1.path != ''
              "
              class="menu_item"
              :index="item1.path"
              style="padding-left: 30px; background-color: #fff; color: #333"
              >{{ item1.name }}
            </el-menu-item>
          </div>
        </el-sub-menu>
      </el-menu>
    </div>
    <div class="flex">
      <el-select
        v-if="show_input"
        v-model="select_value"
        placeholder="请输入关键字"
        class="m_right10"
        filterable
        remote
        reserve-keyword
        :remote-method="remoteMenu"
        @change="search_select"
      >
        <el-option
          v-for="(item, index) in select_options_list"
          :label="item.name"
          :value="item.path"
        ></el-option>
      </el-select>

      <el-tooltip content="菜单搜索" placement="bottom">
        <svgBtn
          style="
            font-size: 20px !important;
            padding: 5px;
            margin: 0 5px;
            border-radius: 3px;
            height: 20px;
            line-height: 20px;
          "
          :style="{
            backgroundColor: svg_color_list[0] == '#3580eb' ? '#ECF4FF' : '',
          }"
          :color="svg_color_list[0]"
          @mouseenter="svg_color_list[0] = '#3580eb'"
          @mouseleave="svg_color_list[0] = '#45474A'"
          icon="search"
          @click="show_input = !show_input"
        ></svgBtn>
      </el-tooltip>
      <el-tooltip
        :content="isScreenfull ? '取消全屏' : '全屏'"
        placement="bottom"
      >
        <svgBtn
          style="
            font-size: 20px !important;
            padding: 5px;
            margin: 0 5px;
            border-radius: 3px;
            height: 20px;
            line-height: 20px;
          "
          :style="{
            backgroundColor: svg_color_list[1] == '#3580eb' ? '#ECF4FF' : '',
          }"
          :color="svg_color_list[1]"
          @mouseenter="svg_color_list[1] = '#3580eb'"
          @mouseleave="svg_color_list[1] = '#45474A'"
          :icon="isScreenfull ? 'page_mini_1' : 'page_large_1'"
          @click="full"
        ></svgBtn>
      </el-tooltip>
      <el-tooltip content="工程配置" placement="bottom">
        <svgBtn
          style="
            font-size: 20px !important;
            padding: 5px;
            margin: 0 5px;
            border-radius: 3px;
            height: 20px;
            line-height: 20px;
          "
          :style="{
            backgroundColor: svg_color_list[2] == '#3580eb' ? '#ECF4FF' : '',
          }"
          :color="svg_color_list[2]"
          @mouseenter="svg_color_list[2] = '#3580eb'"
          @mouseleave="svg_color_list[2] = '#45474A'"
          icon="setup"
          @click="show_setup_box = true"
        ></svgBtn>
      </el-tooltip>
      <div class="">
        <el-dropdown>
          <div class="flex m_left10">
            <img
              v-if="store.state.user_info.headPic != ''"
              :src="store.state.user_info.headPic"
              style="
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin-right: 5px;
              "
              alt=""
            />
            <img
              v-else
              src="@/assets/img/headerImg.png"
              style="
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin-right: 5px;
              "
              alt=""
            />
            <span>{{ store.state.user_info.username }}</span>
            <svgBtn
              icon="xiala"
              style="font-size: 12px; margin-left: 8px"
            ></svgBtn>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                style="padding: 5px 16px"
                @click="lock_box = true"
              >
                <div class="flex">
                  <svgBtn
                    icon="suoding"
                    style="font-size: 14px; margin-right: 8px"
                  ></svgBtn>
                  锁定屏幕
                </div>
              </el-dropdown-item>
              <el-dropdown-item style="padding: 5px 16px" @click="sign_out">
                <div class="flex">
                  <svgBtn
                    icon="tuichu"
                    style="font-size: 14px; margin-right: 8px"
                  ></svgBtn>
                  退出系统
                </div>
              </el-dropdown-item>
              <el-dropdown-item
                style="padding: 5px 16px"
                @click="show_role = true"
                v-if="is_development"
              >
                <div class="flex">
                  <svgBtn
                    icon="table_info"
                    style="font-size: 14px; margin-right: 8px"
                  ></svgBtn>
                  权限系统
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
  <role :show_role="show_role" @close="show_role = false"></role>
  <el-drawer
    v-model="show_setup_box"
    direction="rtl"
    size="30%"
    :close-on-click-modal="false"
  >
    <template #title>
      <h4>项目配置</h4>
    </template>
    <template #default>
      <set_up @close="show_setup_box = false"></set_up>
    </template>
  </el-drawer>
  <el-drawer
    v-model="lock_box"
    direction="rtl"
    size="30%"
    :close-on-click-modal="false"
  >
    <template #title>
      <h4>锁定屏幕</h4>
    </template>
    <template #default>
      <div class="tc m_bottom20">
        <img
          :src="store.state.user_info.headPic"
          style="
            width: 96px;
            height: 96px;
            border-radius: 50%;
            border: 2px solid #c7d2e2;
          "
          alt=""
        />
        <div class="m_top10">{{ store.state.user_info.username }}</div>
      </div>
      <div class="fs_16">锁屏密码</div>
      <el-input
        class="m_10_0"
        placeholder="请输入"
        v-model="lock_keyword"
      ></el-input>
      <div class="tr">
        <el-button @click="lock_box = false">取消</el-button>
        <el-button type="primary" @click="lock">锁定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import set_up from '@/view/components/setup.vue'
import svgBtn from '@/components/svg_button.vue'
import { ref, computed, onUnmounted, onBeforeMount } from 'vue'
import EventBus from '@/utils/EventBus'
import role from '@/view/components/role.vue'
import screenfull from 'screenfull' // 全屏插件
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { setCookie } from '@/utils/cookie'
import axios from '@/service/HttpRequest'
import serviceApi from '@/service/api'
const svg_color_list = ref(['#45474A', '#45474A', '#45474A'])
const isScreenfull = ref(false)
const router = useRouter()
const store = useStore()
const show_role = ref(false)
const show_setup_box = ref(false)
const menu_list_1 = computed(() => {
  return store.state.role_list
})
const is_development = ref(process.env.NODE_ENV == 'development')
const menu_show = computed(() => {
  return store.state.isCollapse
}) // 菜单收 展
const show_input = ref(false) // 搜索框 显影
const show_crumbs = ref(true) // 面包屑
const select_list = ref([])
const select_1 = ref(-1) // 显示一级菜单
const last_value = ref() // 显示最后菜单名称
const has_tabs = ref(false)
const top_menu = computed(() => {
  return store.state.is_top_menu
})
const default_active = ref()

const select_value = ref() // 搜索值
const select_options_list = ref([]) //搜索选项

const lock_box = ref(false)
const lock_keyword = ref('')
// 锁定屏幕
const lock = () => {
  if (lock_keyword.value == '') {
    ElMessage.error('请输入锁屏密码！')
    return
  }
  setCookie('lock_keyword', lock_keyword.value, 1)
  EventBus.emit('lock', lock_keyword.value)
  lock_box.value = false
  lock_keyword.value = ''
}
const sign_out = () => {
  ElMessageBox.confirm('确定退出系统？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    closeOnClickModal: false,
    type: 'warning',
  })
    .then(() => {
      axios
        .request({ url: serviceApi.loginOut, method: 'post' })
        .then((res) => {
          ElMessage.success('操作成功！')
          setTimeout(() => {
            setCookie('bimai_admin_token', '', -1)
            router.push({ name: '/' })
          }, 1000)
        })
        .catch((err) => {
          ElMessage.error(err)
        })
    })
    .catch(() => {})
}
const remoteMenu = (e) => {
  console.log(e)
  if (e == '') {
    select_options_list.value = []
    return
  }
  select_options_list.value = []
  for (let i in store.state.role_list) {
    if (
      store.state.role_list[i].name.indexOf(e) != -1 &&
      (store.state.role_list[i].type == 2 || store.state.role_list[i].type == 3)
    ) {
      select_options_list.value.push(store.state.role_list[i])
    }
  }
}
const search_select = (e) => {
  console.log(e)
  for (let i in select_options_list.value) {
    if (select_options_list.value[i].path == e) {
      store.state.role_list.forEach((element) => {
        if (
          element.id == select_options_list.value[i].parentId &&
          element.parentId == null
        ) {
          select_1.value = element.sort
        }
        if (
          element.id == select_options_list.value[i].parentId &&
          element.parentId != null
        ) {
          select_1.value = element.sort
          store.state.role_list.forEach((item) => {
            if (item.id == element.parentId) {
              select_1.value = item.sort
            }
          })
        }
      })
      console.log(select_1.value)
      select_menu({
        item: select_options_list.value[i],
        type: select_options_list.value[i].type,
      })
    }
  }
}
onBeforeMount(() => {
  EventBus.on('menu_value', (e) => {
    has_tabs.value = false
    change_tabs(e)
  })
  EventBus.on('remove_tabs', (e: any) => {
    if (select_list.value.length == 1) return
    select_list.value.splice(e.index, e.length)
  })
  EventBus.on('search_menu', (e) => {
    show_input.value = e as any
  })
  EventBus.on('show_crumbs', (e) => {
    show_crumbs.value = e as any
  })
})

onUnmounted(() => {
  EventBus.off('menu_value')
  EventBus.off('remove_tabs')
  EventBus.off('search_menu')
  EventBus.off('show_crumbs')
})
const change_tabs = (e) => {
  if (e.type == 1) {
    if (e.index != 0) {
      for (let i in select_list.value) {
        if (select_list.value[i] == e.index) {
          has_tabs.value = true
          select_1.value = select_list.value[i].split(',')[0]
        }
      }
    }
    if (!has_tabs.value) {
      select_list.value.push(e.index)
      select_1.value = e.index.split(',')[0]
    }
  } else {
    if (e.index != 0) {
      select_1.value = select_list.value[e.index].split(',')[0]
    }
  }
  get_last_name(e.index) // 面包屑  后面的路由名字
}
const get_last_name = (e) => {
  console.log(e)
  if (e == 0) {
    last_value.value = '数据分析'
    select_1.value = -1
    EventBus.emit('change_default_active', '/index') //激活左侧菜单
    default_active.value = '/index'
    return
  }
  let list = store.state.role_arr
  for (let i in list) {
    if (e.toString().split(',').length == 1) {
      if (
        list[i].path ==
        select_list.value[e].split(',')[
          select_list.value[e].split(',').length - 1
        ]
      ) {
        console.log(list[i].name)
        last_value.value = list[i].name
        EventBus.emit('change_default_active', list[i].path)
        default_active.value = list[i].path
        break
      }
    } else if (e.split(',').length == 2) {
      if (list[i].path == e.split(',')[1]) {
        last_value.value = list[i].name
        EventBus.emit('change_default_active', e.split(',')[1])
        default_active.value = e.split(',')[1]
        break
      }
    } else {
      if (list[i].path == e.split(',')[2]) {
        last_value.value = list[i].name
        EventBus.emit('change_default_active', e.split(',')[2])
        default_active.value = e.split(',')[2]
        break
      }
    }
  }
}
const to_path = ref()
const select_top_menu = (index, indexPath) => {
  //   const router_list = router.getRoutes() // 子路由集合
  console.log(index, indexPath)
  to_path.value = index

  router.push(to_path.value.substr(1, to_path.value.length - 1))
  if (index == '/index') {
    EventBus.emit('menu_value', { index: '0', type: 1 })
  } else {
    EventBus.emit('menu_value', { index: indexPath.toString(), type: 1 })
  }
}
const full = () => {
  // 判断是否支持
  if (!screenfull.isEnabled) {
    ElMessage({
      message: '不支持全屏',
      type: 'warning',
    })
    return false
  }
  screenfull.toggle()
  isScreenfull.value = !isScreenfull.value
}
const tabs_list = ref(store.state.tabs_list)
const has_tab = ref(false)
const select_menu = (e) => {
  console.log(e, select_1.value)
  var path = e.item.path
  for (let i in tabs_list.value) {
    if (path == tabs_list.value[i].path) {
      router.push({
        name: path.substr(1, path.length - 1),
      })
      store.commit('select_tabs_list', i)
      has_tab.value = true
    }
  }
  if (!has_tab.value) {
    router.push(path.substr(1, path.length - 1))
  }
  has_tab.value = false
  change_tabs({ index: select_1.value + ',' + e.item.path, type: 1 })
  last_value.value = e.item.name
  EventBus.emit('change_default_active', e.item.path) // 同步左侧菜单
}
</script>

<style lang="scss" scoped>
.menu_item:hover {
  color: #3580eb !important;
  background-color: #f5f9ff !important;
}
:deep(.el-menu) {
  border-bottom: none;
  --el-menu-text-color: #333 !important;
  --el-menu-hover-text-color: #3580eb !important;
  --el-menu-bg-color: #fff !important;
  --el-menu-hover-bg-color: #f5f9ff !important;
  --el-menu-active-color: #3580eb;
}
:deep(.el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title) {
  background-color: #3580eb !important;
  color: #fff !important;
  :hover {
    color: #fff !important;
  }
}
:deep(.el-sub-menu__title) {
  padding: 0 10px 0 30px !important;
  color: #333 !important;
  background-color: #fff !important;
  :hover {
    color: #3580eb !important;
  }
}
:deep(.el-dropdown-menu__item) {
  height: 30px;
  line-height: 30px;
}
.to_left {
  transform: rotateZ(180deg);
}
.to_right {
  transform: rotateZ(360deg);
}
</style>
